import React from 'react';
import styles from './Loading.less';

export default class extends React.PureComponent {
  state = {
    progress: 100
  }

  componentDidMount() {
    this.clearinterval = setInterval(() => {
      this.setState(state => ({
        ...state,
        progress: state.progress - 2
      }), () => {
        const { progress } = this.state;
        if (progress <= 2) clearInterval(this.clearinterval)
      });
    }, 50);
  }

  componentWillUnmount() {
    clearInterval(this.clearinterval);
  }

  render() {
    const { progress } = this.state;
    return (
      <section id="loading" className={styles.loading}>
        <section className={styles.gif}>
          <img src={`${LDY_PREFIX}/loading.gif`} alt="" />
        </section>
        <section className={styles.progress}>
          <section className={styles.bar}>
            <img src={`${LDY_PREFIX}/loadingProgress.png`} alt="" />
            <section className={styles.line} style={{right: `${progress}%`}} />
          </section>
        </section>
      </section>
    );
  }
}